<template>
	<uni-forms ref="valiFormRef" :rules="rules" :modelValue="valiFormData" label-position="top">
		<uni-forms-item label="记录时间"  name="time">
			<uni-datetime-picker type="datetime" v-model="valiFormData.time" :clear-icon="false"/>
		</uni-forms-item>
		<view class="yyp">
			<uni-forms-item label="药品名称" class="equipmentName" name="equipmentName">
				<uni-easyinput v-model="valiFormData.equipmentName" placeholder="请输入药品名称">
					
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="剂量及单位" class="jldw" name="equipmentValue">
				<uni-easyinput v-model="valiFormData.equipmentValue"  placeholder="剂量及单位">
				</uni-easyinput>
			</uni-forms-item>
		</view>
		<view class="history" @click="goHistory">
			<view class="label">
				点我可从历史记录中选择并填入药品信息
			</view>
			<uni-icons class="icon" type="right" size="20" color="#ccc"></uni-icons>
		</view>
		
		<uni-forms-item label="备注" name="remark">
			<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
		</uni-forms-item>
		<uni-forms-item label="上传图片" name="file">
			<upload-file v-model="valiFormData.fileList"></upload-file>
		</uni-forms-item>
	</uni-forms>
</template>

<script  setup>
	import {reactive,ref,computed} from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
	import {getHistoryDataById} from '@/utils/index.js'
	// 校验规则
	const rules= {
		equipmentName: {
			rules: [{
				required: true,
				errorMessage: '药品名称不能为空'
			}]
		},
		time: {
			rules: [{
				required: true,
				errorMessage: '时间不能为空'
			}]
		}
	}
	
	
	const imgPath = ref('')
	const opts= ref({})
	
	const valiFormData= reactive({
		time: '',
		equipmentName: '',
		equipmentValue:'',
		remark: '',
		fileList: []
	})
	
	const goHistory=()=>{
		console.log(opts.value);
		let {type} = opts.value
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-3/recordDetail/history?type=${type}`
		});
		
	}
	
	
	onLoad((options)=>{
		console.log(options,'组件内');
		uni.$on('add', (e)=>{
			console.log(e,'传递的数据');
			Object.keys(valiFormData).forEach((key)=>{
				if(key !== 'time'){
					valiFormData[key] = e[key]
				}
			})
			valiFormData.historyId =e.historyId
		})
		opts.value = options
		if(options.id){
			let data = getHistoryDataById(options.id)
			console.log(data,'需要修改的数据');
			Object.keys(valiFormData).forEach((key)=>{
				valiFormData[key] = data[key]
			})
			valiFormData.historyId =data.historyId
		}else{
			valiFormData.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
		}
	})
	
	
	
	const valiFormRef = ref(null)
	
	const submit = ()=>{
		console.log('触发校验',valiFormRef.value,valiFormData);
		return new Promise((resolve,reject)=>{
			valiFormRef.value.validate().then(res => {
				console.log('success', res,valiFormData);
				resolve({
					...valiFormData,
				})
			}).catch(err => {
				reject(err)
			})
		})
		
	}
	
	defineExpose({
		submit
	})
	
	
</script>

<style lang="scss" scoped>
	.yyp{
		display: flex;
		.equipmentName{
			flex: 2;
		}
		.jldw{
			margin-left: 20rpx;
			flex: 1;
		}
	}
	.history{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ccc;
		.label{
			font-size: 24rpx;
		}
		.icon{
			font-size: 24rpx;
			color: #ccc;
		}
	}
</style>